<template>
  <div>
    <template v-if="listData.length > 0">
      <el-row :gutter="24">
        <el-col class="mb20" v-for="(item,index) in listData" :key="index" :span="8">
          <el-card shadow="never" class="list-card">
            <div slot="header" style="text-align: center">
              <span>{{ item.materialName }}</span>
              <!-- <el-tooltip
                class="item"
                effect="dark"
                v-if="$auth('eval:detail')"
                content="详情"
                placement="top"
              >
                <i @click.stop="handleStart(item)" class="fr curp fs16 el-icon-document" />
              </el-tooltip>-->
            </div>
            <el-form label-width="100px">
              <el-form-item label="目录标识">
                <span>{{ item.dirFlag === 0 ? '目录内' : '目录外' }}</span>
              </el-form-item>
              <el-form-item label="规格单位">
                <span>{{ item.specUnit }}</span>
              </el-form-item>
              <el-form-item label="单价">
                <span>{{ item.materialPrice }}</span>
              </el-form-item>
              <el-form-item label="规格">
                <span>{{ item.materialSpec }}</span>
              </el-form-item>
              <el-form-item label="是否收费">
                <span>{{ !item.feeFlag ? '否' : '是' }}</span>
              </el-form-item>
              <el-form-item label="物资类别">
                <span>{{ item.materialType }}</span>
              </el-form-item>
              <el-form-item label="物资用途">
                <span>{{ item.materialUse }}</span>
              </el-form-item>
              <el-form-item label="物资状态">
                <span>{{ !item.materialState ? '在用' : '停用' }}</span>
              </el-form-item>
              <el-form-item label="是否高值耗材">
                <span>{{ !item.highValueFlag ? '否' : '是' }}</span>
              </el-form-item>
              <el-form-item label="生产厂家">
                <span>{{ item.factory }}</span>
              </el-form-item>
              <el-form-item label="供应商">
                <span>{{ item.supplier }}</span>
              </el-form-item>
              <el-form-item label="最后编辑人">
                <span>{{ item.editUser }}</span>
              </el-form-item>
              <el-form-item label="最后编辑时间">
                <span>{{ formatTime(item.editTime) }}</span>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col class="tl-center nomoreWord" v-show="noMore">---- 这是我的底线 ----</el-col>
      </el-row>
    </template>

    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { getHisMaterialDir } from '@/api/supplier'
import { judgeRange, judgeEvalState, judgeType, getSession } from '@/utils/util'

export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listData: [],
      total: 1,
      param: {
        pageSize: 10,
        pageNo: 1,
        supplierCode: null
      },
      noMore: false
    }
  },
  watch: {
    name(n, o) {
      this.name = n
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.param.supplierCode = getSession('record').supplierCode
    })
    this.getNotFinished()
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll() {
      if (this.name === 'first') {
        if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
          this.loadMore()
        }
      }
    },
    loadMore() {
      console.log('loadMore', this.listData.length, this.total)

      if (this.param.pageNo * 10 > this.total) {
        this.noMore = true
      } else {
        this.param.pageNo += 1
        this.getNotFinished(this.param)
      }
    },
    async getNotFinished(param = {}) {
      this.param = Object.assign(this.param, param)
      const res = await getHisMaterialDir(this.param)
      if (res && res.data.records.length > 0) {
        if (this.param.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...res.data.records]
        }
        console.log('listData', this.listData)

        this.total = res.data.total
        if (this.param.pageNo * 10 > this.total) {
          this.noMore = true
        }
      } else {
        this.listData = []
        this.total = 1
      }
    },
    judgeType(num) {
      return judgeType(num)
    },
    judgeState(num) {
      return judgeEvalState(num)
    },
    judgeRange(num) {
      return judgeRange(num)
    },
    handleStart(row) {
      this.$router.push({
        name: 'evaluateTable',
        params: { row }
      })
    },
    handleEdit(bool, row) {
      console.log(bool, row)
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 2px;
}
</style>